<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
  <!--/* 共用JS与CSS */-->
  <th:block th:replace="~{assets/include :: scriptcss_default('用户管理')}"/>
</head>
<body>
  <div id="app" v-cloak>
    <v-app>
      <!-- 左侧区域::导航菜单 -->
      <th:block th:replace="~{assets/include :: navMenu}"/>

      <!-- 顶部功能区 -->
      <v-app-bar flat>
        <th:block th:replace="~{assets/include :: header}"/>
      </v-app-bar>

      <!-- 主体部分 -->
      <v-main>
        <!-- 主体容器 -->
        <v-container fluid>
          <v-sheet class="rounded-0 px-6 py-3">
            <!-- 查询条件 -->
            <v-form ref="queryForm" class="assist">
              <v-row>
                <v-col cols="12" sm="6" md="3">
                  <v-tree-select v-model="selectedOrgIds" mandatory :items="availableOrgs" :label="$t('机构')" @load="loadAvailableOrgs"></v-tree-select>
                </v-col>
                <v-col cols="12" sm="6" md="3" lg="2">
                  <v-text-field v-model="param.loginName" hide-details clearable :label="$t('账号')"></v-text-field>
                </v-col>
                <v-col cols="12" sm="6" md="3" lg="2">
                  <v-select v-model="param.status" hide-details clearable :items="statusList" :label="$t('状态')"></v-select>
                </v-col>
                <v-col class="text-right">
                  <v-btn size="large" color="primary" class="mr-2" @click="doQuery(1)">{{$t('查询')}}</v-btn>
                  <v-btn size="large" variant="outlined" @click="resetQueryForm(1)">{{$t('重置')}}</v-btn>
                </v-col>
              </v-row>
            </v-form>

            <!-- 数据表格 -->
            <v-card-zoom flat class="mt-3">
              <v-data-table-server
                  ref="dataTable"
                  :loading="loading"
                  :headers="datatable.headers"
                  :items="datatable.items"
                  :items-length="datatable.total"
                  item-value="userId"
                  mobile-breakpoint="md"
                  fixed-header
                  hover
                  class="pagination v-table-fill-height"
                  :style="{'--ty-assist-height': assistHeight}"
                  :page="pagination.page"
                  v-model:items-per-page="pagination.pageSize"
                  @update:options="doQueryTable"
              >
                <template #top shiro:hasPermission="/system/user/save">
                  <v-row class="assist ma-0">
                    <v-col>
                      <v-btn color="primary" class="pr-5 pl-4" @click="openFormDialog('新增用户')">
                        <v-icon size="small">mdi-plus</v-icon>
                        {{$t('新增')}}
                      </v-btn>
                    </v-col>
                  </v-row>
                </template>
                <template v-slot:item.userType="{item}">
                  {{typeMap[item.userType]}}
                </template>
                <template v-slot:item.status="{value}">
                  {{statusMap[value]}}
                </template>
                <template v-slot:item.enablekickout="{item}">
                  <v-sheet class="bg-transparent d-flex justify-center pl-2">
                    <v-switch shiro:hasPermission="/system/user/set/kickout" inset hide-details :readonly="item.loading" :loading="item.loading" :true-value="1" :false-value="0" :model-value="item.enableKickOut" @update:model-value="val => changeKickOut(val, item)"></v-switch>
                    <v-btn shiro:lacksPermission="/system/user/set/kickout" variant="text" :color="1===item.enableKickOut? 'success' : 'error'">{{$t(1===item.enableKickOut? '启用' : '停用')}}</v-btn>
                  </v-sheet>
                </template>
                <template v-slot:item.operation="{item}">
                  <a class="mr-2" @click="openFormDialog('修改用户', item.userId)" shiro:hasPermission="/system/user/update">{{$t('修改')}}</a>
                  <v-btn-confirm clazz="mr-2" :data="item.userId" @confirm="doDelete" shiro:hasPermission="/system/user/del"></v-btn-confirm>
                  <v-btn-confirm :data="item.userId" @confirm="doResetPwd" :message="$t('确定重置密码？')" shiro:hasPermission="/system/user/password/reset">{{$t('重置密码')}}</v-btn-confirm>
                  <v-spacer></v-spacer>
                  <a class="mr-2 mr-sm-11 mr-md-7 mr-lg-11" @click="openWinDrawer(item.userId, item.loginName, item.realName)" shiro:hasPermission="/system/user/grant/list">{{$t('授权')}}</a>
                  <a @click="openWinRelatedDrawer(item.userId, item.loginName, item.realName)" shiro:hasPermission="/system/uorg/list">{{$t('关联')}}{{$t('机构')}}</a>
                </template>
                <template #bottom="{ pageCount, items }">
                  <v-pagination class="assist pagebar" v-model="pagination.page" :total-visible="pagination.vp" :length="pageCount" :disabled="loading"/>
                </template>
              </v-data-table-server>
            </v-card-zoom>
          </v-sheet>

          <!-- 数据表单模态窗口 -->
          <v-dialog v-model="winDialog" persistent :fullscreen="isMobile" width="800">
            <tform as="v-form" ref="dataForm" class="fill-height" @submit="doSubmit">
              <v-card :loading="posting">
                <v-toolbar color="indigo" :title="$t(dialogTitle)">
                  <v-btn icon="mdi-close" @click="closeFormDialog"></v-btn>
                </v-toolbar>
                <v-card-text class="overflow-auto">
                  <!-- 数据表单 -->
                  <tfield v-model="formData.userType" name="用户类型" v-slot="{ field, errors }" rules="required" th:if="${1 == principal.userType}">
                    <v-radio-group v-bind="field" :model-value="field.value" inline :error-messages="errors" class="mt-1">
                      <template #prepend>
                        {{$t('用户类型')+'：'}}
                      </template>
                      <v-radio v-for="item in typeList" :value="item.value" :label="item.title"></v-radio>
                    </v-radio-group>
                  </tfield>
                  <tfield v-model.trim="formData.loginName" name="账号" v-slot="{ field, errors }" rules="required|alpha_dash|max:30">
                    <v-text-field v-bind="field" :model-value="field.value" clearable v-blank type="text" :error-messages="errors" :label="$t('账号')" class="mt-1"></v-text-field>
                  </tfield>
                  <tfield v-model.trim="formData.realName" name="姓名" v-slot="{ field, errors }" rules="required|max:30">
                    <v-text-field v-bind="field" :model-value="field.value" clearable v-blank type="text" :error-messages="errors" :label="$t('姓名')" class="mt-1"></v-text-field>
                  </tfield>
                  <tfield v-model="formData.gender" name="性别" v-slot="{ field, errors }" rules="required">
                    <v-radio-group v-bind="field" :model-value="field.value" inline :error-messages="errors" class="mt-1">
                      <template #prepend>
                        {{$t('性别')+'：'}}
                      </template>
                      <v-radio v-for="item in genderList" :value="item.value" :label="item.title"></v-radio>
                    </v-radio-group>
                  </tfield>
                  <tfield v-model.trim="formData.phone" name="手机" v-slot="{ field, errors }" rules="alpha_dash|max:30">
                    <v-text-field v-bind="field" :model-value="field.value" clearable v-blank type="text" :error-messages="errors" :label="$t('手机')" class="mt-1"></v-text-field>
                  </tfield>
                  <tfield v-model.trim="formData.email" name="邮箱" v-slot="{ field, errors }" rules="email|max:50">
                    <v-text-field v-bind="field" :model-value="field.value" clearable v-blank type="text" :error-messages="errors" :label="$t('邮箱')" class="mt-1"></v-text-field>
                  </tfield>
                  <tfield v-model="formData.status" name="状态" v-slot="{ field, errors }" rules="required">
                    <v-radio-group v-bind="field" :model-value="field.value" inline :error-messages="errors" class="mt-1">
                      <template #prepend>
                        {{$t('状态')+'：'}}
                      </template>
                      <v-radio v-for="item in statusList" :value="item.value" :label="item.title"></v-radio>
                    </v-radio-group>
                  </tfield>
                  <tfield v-model.trim="formData.remark" name="备注" v-slot="{ field, errors }" rules="max:200">
                    <v-textarea v-bind="field" :model-value="field.value" clearable v-blank :error-messages="errors" :label="$t('备注')" class="mt-1"></v-textarea>
                  </tfield>
                  <!-- 提示 -->
                  <span class="text-orange text-subtitle-2" v-show="'新增用户'==dialogTitle">{{$t('重要说明：用户初始密码为：[[${defaultPassword ?: ''}]]，请登录后及时修改')}}</span>
                </v-card-text>
                <v-divider></v-divider>
                <v-card-actions>
                  <v-btn size="large" variant="elevated" color="primary" type="submit" :loading="posting">{{$t('保存')}}</v-btn>
                </v-card-actions>
              </v-card>
            </tform>
          </v-dialog>

          <!-- 权限标识 -->
          <span ref="updatePermis" class="d-none" shiro:hasPermission="/system/user/update"></span>
          <span ref="delPermis" class="d-none" shiro:hasPermission="/system/user/del"></span>
        </v-container>

        <!--全屏Loading提示-->
        <v-loading :value="overlay"></v-loading>
      </v-main>

      <!--/* 导入角色授权模块的代码片段 */-->
      <th:block th:replace="~{system/user/user-role :: grant}"/>

      <!--/* 导入关联机构模块的代码片段 */-->
      <th:block th:replace="~{system/user/uorg-related :: related}"/>
    </v-app>
  </div>

  <!-- 导入Vuetify扩展组件 -->
  <th:block th:replace="~{assets/vuetify :: v-loading}"/>
  <th:block th:replace="~{assets/vuetify :: v-card-zoom}"/>
  <th:block th:replace="~{assets/vuetify :: v-btn-confirm}"/>
  <th:block th:replace="~{assets/vuetify :: v-tree-select}"/>

  <!-- 业务js -->
  <script type="text/javascript" th:src="@{/js/system/user/user.js?_t=#buildtime#}"></script>
  <script type="text/javascript">
    // 初始化Vue
    const app = Vue.createApp({
      extends: baseApp,
      mixins: [userMixin, grantMixin, relatedMixin]
    });
    const appInstance = baseApp.uses(app).mount('#app');
  </script>
</body>
</html>
